<template>
	<view class="walletBgc">
		<view class="walletBox me-fx-row-sa-c">
			<view class="walletBoxLeft">
				<view class="walletBoxLeftBalance me-fx-row-start-c">
					<view class="walletBoxLeftMoney fontSize">
						{{money}}
					</view>
					<view class="">
						社区币
					</view>
				</view>
				<view class="walletBoxLeftMoneyValue">
					账号余额
				</view>
			</view>
			<view class="walletBoxRight">
				<view class="walletBoxRightWithdraw me-fx-row-start-c">
					<view class="walletBoxRightValue fontSize">
						{{withdrawMoney}}
					</view>
					<view class="">
						社区币
					</view>
				</view>
				<view class="walletBoxRightWithdrawValue">
					可提现
				</view>
			</view>
		</view>
		<view class="recordBox">
			<view class="recordRecharge height me-fx-row-sb-c" @click="rechargeJL">
				<view class="recordRechargeFont">
					充值记录
				</view>
				<image src="../../static/img/right.png" mode=""></image>
			</view>
			<view class="recordWithdraw height me-fx-row-sb-c" @click="withdrawJL">
				<view class="recordWithdrawFont">
					提现记录
				</view>
				<image src="../../static/img/right.png" mode=""></image>
			</view>
		</view>
		<view class="bottomFont">
			每当有人付费查看你的相册或向你发红包，所得收益会进入到钱包。每当你举报用户成功，系统都会自动把你查看该女士相册或联系方式的费用退回到这里。你可以随时提现 (处理时间2个工作日内)，体现将收取{{rateMoney.fee}}%手续费。
		</view>
		<view class="bottomFiex me-fx-row-sb-c">
			<view class="withdrawBtn" @click="tixianBtn">
				提现
			</view>
			<view class="rechargeBtn" @click="chongzhiBtn">
				充值
			</view>
		</view>
		<!-- 弹窗 -->
		<view class="Covering" v-if="withdrawTK">
			<view class="withdrawTK">
				<image src="../../static/img/f6b8c0d387a54a3aa017c1e17b074df.png" mode=""></image>
				<input type="text" value="" class="inputValue" placeholder="请输入您的支付宝名字" v-model="inputValueName" />
				<input type="text" value="" class="inputValue" placeholder="请输入您的支付宝账号" v-model="inputValueaCcount" />
				<view class="btnBox me-fx-row-sb-c">
					<view class="cancelBtn" @click="cancelBtn">
						取消
					</view>
					<view class="sureBtn" @click="sureBtn">
						确定
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				withdrawTK: false,
				inputValueName: '',
				inputValueaCcount: '',
				money: '',
				withdrawMoney: '',
				rateMoney: '',

			}
		},
		created() {
			this.moneyData();
			this.withdrawData();
			this.rate()
		},
		methods: {
			cancelBtn() {
				this.withdrawTK = false
			},
			chongzhiBtn() {
				uni.navigateTo({
					url: './recharge'
				})
			},
			tixianBtn() {
				this.withdrawTK = true
			},
			moneyData() {
				this.$u.get('/wallet/money').then(res => {
						if (res) {
							console.log(res, 'dada')
							this.money = res.data.money
						}
					})
					.catch((res) => {
						console.log(res.message)
					})
			},
			rate() {
				this.$u.get('/withdrawal/fee').then(res => {
						if (res) {
							this.rateMoney = res.data
						}
					})
					.catch((res) => {
						console.log(res.message)
					})
			},
			rechargeJL() {

			},
			rechargeJL() {
				console.log("dsdfs")
				uni.navigateTo({
					url: './rechargeJL'
				})
			},
			withdrawJL() {
				console.log("0000")
				uni.navigateTo({
					url: './withdrawRecord'
				})
			},
			withdrawData() {
				this.$u.get('/wallet/money/own').then(res => {
						if (res) {
							this.withdrawMoney = res.data.money
						}
					})
					.catch((res) => {
						console.log(res.message)
					})
			},
			sureBtn() {
				if (this.inputValueName == '') {
					uni.showToast({
						title: '请输入支付宝名字',
						duration: 1000,
						icon: 'none'
					});
					return
				} else if (this.inputValueaCcount == '') {
					uni.showToast({
						title: '请输入支付宝账号',
						duration: 1000,
						icon: 'none'
					});
					return
				} else {
					let data = {
						name: this.inputValueName,
						account: this.inputValueaCcount
					}
					this.$u.post('/withdrawal/account/set', data).then(res => {
							if (res) {
								console.log(res, 'dsddss')
								this.withdrawTK = false
								// this.withdrawMoney = res.data.money
								uni.navigateTo({
									url: './withdraw'
								})
							}
						})
						.catch((res) => {
							console.log(res.message)
						})
				}
			}
		}
	}
</script>

<style>
	.walletBgc {
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;
	}

	.walletBox {
		width: 96%;
		height: 243rpx;
		background: linear-gradient(38deg, rgba(169, 168, 255, 1), rgba(160, 215, 255, 1));
		border-radius: 24rpx;
		margin: auto;
		color: white;
	}

	.fontSize {
		font-size: 50rpx;
		/* font-weight: 700; */
		width: 200rpx;
	}

	.walletBoxLeftMoneyValue,
	.walletBoxRightWithdrawValue {
		font-size: 32rpx;
		text-align: center;
	}

	.walletBoxLeftMoney,
	.walletBoxRightValue {
		margin-right: 10rpx;
		text-align: center;
		word-break: break-all;
	}

	.walletBoxRight {
		/* width: 50%; */
	}

	.walletBoxLeft {
		position: relative;
		/* width: 50%; */
	}

	.walletBoxLeft::after {
		content: ' ';
		position: absolute;
		top: 50%;
		right: -50rpx;
		transform: translateY(-50%);
		width: 2rpx;
		height: 134rpx;
		background: rgba(255, 255, 255, 1);
		opacity: 0.14;
		border-radius: 50%;
	}

	.recordBox {
		border-radius: 16rpx;
		background-color: white;
		margin: 14rpx 21rpx;
	}

	.recordBox image {
		width: 10rpx;
		height: 20rpx;
	}

	.height {
		height: 120rpx;
		line-height: 120rpx;
		padding: 0 30rpx;
	}

	.bottomFont {
		padding: 0 23rpx;
		font-size: 25rpx;
		color: rgba(101, 101, 101, 1);
		line-height: 39rpx;
		margin-top: 141rpx;
	}

	.bottomFiex {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;

	}

	.bottomFiex view {
		width: 50%;
		height: 115rpx;
		text-align: center;
		line-height: 115rpx;
	}

	.rechargeBtn {
		background: #4C48F5;
		font-size: 32rpx;
		color: white;
	}

	.withdrawBtn {
		background: rgba(225, 225, 255, 1);
		color: #4B47F5;
		font-size: 32rpx;
	}

	.withdrawTK {
		width: 94%;
		height: 64r2px;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
		background-color: white;
		margin: 350rpx auto;
		overflow: hidden;
	}

	.withdrawTK image {
		width: 101%;
		height: 172rpx;
	}

	.inputValue {
		height: 38rpx;
		background: rgba(255, 255, 255, 1);
		border: 1rpx solid rgba(205, 205, 205, 1);
		border-radius: 10rpx;
		font-size: 30rpx;
		color: rgba(85, 85, 85, 1);
		line-height: 98rpx;
		margin: auto;
		margin: 26rpx 48rpx;
		padding: 30rpx;
	}

	.btnBox {
		padding: 48rpx;
		box-sizing: border-box;

	}

	.btnBox .cancelBtn,
	.btnBox .sureBtn {
		width: 228rpx;
		height: 80rpx;
		border: 1rpx solid rgba(130, 76, 254, 1);
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.cancelBtn {
		background: rgba(255, 255, 255, 1);
		color: #824CFE;
	}

	.sureBtn {
		background-color: #824CFE;
		color: white;
	}
</style>
